<template>
  <div>
    <vxe-modal ref="xModal" v-model="isShowAddOrUpdateEmployeeModal" title="编辑&保存" width="800" :zIndex="999" resize destroy-on-close>
      <vxe-form ref="xForm" :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
        <vxe-form-item title="送样跟踪" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-address-card-o'}"></vxe-form-item>
        <vxe-form-item title="内容" field="content" span="24" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item align="center" span="24" :visible-method="isDetail">
          <vxe-button type="submit" status="primary">保存</vxe-button>
          <vxe-button type="reset">重置</vxe-button>
          <vxe-button @click="close()">取消</vxe-button>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>
  </div>
</template>
<script>
import { sampleSendApi } from '@/api/sample-send';
export default {
  name: 'SampleSendTableTrack',
  components: { 
  },
  props: {
  },
  data() {
    return {
      isShowAddOrUpdateEmployeeModal: false,
      isShowLoading: false,
      isShowDetail: false,
      inputAttrs: {
        placeholder: '请输入', 
        disabled: false
      },
      formData: {
        id: 0,
        sampleSendId: 0,
        content: ''
      },
      formRules: {
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {},
  watch: {
  },
  filters: {},
  created() {
  },
  mounted() {
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    // 打开Modal
    showModal(sampleSendId) {
      this.formData = {};
      this.formData.sampleSendId = sampleSendId;
      this.isShowAddOrUpdateEmployeeModal = true;
    },
    // isDetail
    isDetail({data, property}) {
      return !this.isShowDetail;
    },
    close() {
      this.$Modal.confirm({
        title: '友情提醒',
        content: '确定要关闭吗?关闭后表单会被重置!',
        onOk: () => {
          this.$refs.xModal.close();
        }
      });
    },
    // 点击提交
    submitEvent() {
      this.add(this.formData);
    },
    // 添加新用户接口
    async add(data) {
      try {
        let reqData = Object.assign({}, data);
        this.isShowLoading = true;
        let result = await sampleSendApi.addTrack(reqData);
        this.isShowAddOrUpdateEmployeeModal = false;
        this.$Message.success('添加成功');
        this.$emit('addSuccess');
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
      } finally {
        this.isShowLoading = false;
      }
    }
  }
};
</script>
